<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载图片</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>加载图片</h1>

  <h3>1、将本地图片加载到表中</h3>
  <div id="spreadsheet1"></div>

  <h3>2、将远程图片嵌入到您的表中</h3>
  <div id="spreadsheet2"></div>
</body>
<script>
  // 1、将本地图片加载到表中
  var data = [
    ['Yellow', ''],
  ];

  jspreadsheet(document.getElementById('spreadsheet1'), {
    data: data,
    minDimensions: [2, 4],
    columns: [
      { type: 'text', width: 300, title: 'Title' },
      { type: 'image', width: 120, title: 'Cover' },

    ]
  });

  // 2、将远程图片嵌入到您的表中
  var data2 = [
    ['https://marketplace.canva.com/MACcZp2p4po/2/0/thumbnail_large/canva-black-white-acoustic-album-cover-MACcZp2p4po.jpg', 'Paul Parker'],
    ['https://marketplace.canva.com/MACcY55adP4/1/0/thumbnail_large/canva-black-and-white-masculine-acoustic-modern-album-cover-MACcY55adP4.jpg', 'Mark Ellen']
  ];

  jspreadsheet(document.getElementById('spreadsheet2'), {
    data: data2,
    columns: [
      { type: 'text', width: 300, title: 'Cover' },
      { type: 'text', width: 300, title: 'Title' },
    ],
    updateTable: function (instance, cell, col, row, val, id) {
      if (col == 0) {
        cell.innerHTML = '<img src="' + val + '" style="width:100px;height:100px">';
      }
    }
  });
</script>

</html>